<template>
    <div id="category">
        <category-nav-bar class="nav-bar"></category-nav-bar>
        <div class="content">
            <category-menu :categoryList="categoryList" @selectItem="selectItem"></category-menu>
            <scroll id="tab-content" :data="[categoryData]">
                <div>
                    <tab-content-category :subcategories="showSubcategory"></tab-content-category>
                    <tab-control :titles="['综合', '新品', '销量']" @itemClick="tabClick"></tab-control>
                    <tab-content-detail :category-detail="showCategoryDetail"></tab-content-detail>
                </div>
            </scroll>
        </div>
    </div>
</template>

<script>
import CategoryNavBar from './childComps/CategoryNavBar'
import CategoryMenu from './childComps/CategoryMenu'
import TabContentCategory from './childComps/TabContentCategory'
import TabContentDetail from './childComps/TabContentDetail'
import TabControl from 'content/tabControl/TabControl'
import Scroll from 'common/scroll/Scroll'
import { POP, SELL, NEW } from "@/common/const";
import { tabControlMixin } from "@/common/mixin";
import { getCategory, getSubcategory, getCategoryDetail } from 'network/category'
export default {
    name: "category",
    components: {
        CategoryNavBar,
        CategoryMenu,
        TabContentCategory,
        Scroll,
        TabControl,
        TabContentDetail
    },
    mixins: [tabControlMixin],
    data () {
        return {
            categoryList: [],
            categoryData: {
            },
            currentIndex: -1,

        }
    },
    computed: {
        showSubcategory () {
            if (this.currentIndex === -1) return {}
            return this.categoryData[this.currentIndex].subcategories
        },
        showCategoryDetail () {
            if (this.currentIndex === -1) return []
            return this.categoryData[this.currentIndex].categoryDetail[this.currentType]
        }
    },
    created () {
        this._getCategory()
    },
    methods: {
        _getCategory () {
            getCategory().then(res => {
                // 1.获取分类数据
                this.categoryList = res.data.category.list
                // 2.初始化每个类别的子数据
                for (let i = 0; i < this.categoryList.length; i++) {
                    this.categoryData[i] = {
                        subcategories: {},
                        categoryDetail: {
                            'pop': [],
                            'new': [],
                            'sell': []
                        }
                    }
                }
                // 3.请求第一个分类的数据
                this._getSubcategories(0)
            })
        },
        _getSubcategories (index) {
            this.currentIndex = index;
            const mailKey = this.categoryList[index].maitKey;
            getSubcategory(mailKey).then(res => {
                this.categoryData[index].subcategories = res.data
                this.categoryData = { ...this.categoryData }
                this._getCategoryDetail(POP)
                this._getCategoryDetail(SELL)
                this._getCategoryDetail(NEW)
            })
        },
        _getCategoryDetail (type) {
            // 1.获取请求的miniWallkey
            const miniWallkey = this.categoryList[this.currentIndex].miniWallkey;
            // 2.发送请求,传入miniWallkey和type
            getCategoryDetail(miniWallkey, type).then(res => {
                // 3.将获取的数据保存下来
                this.categoryData[this.currentIndex].categoryDetail[type] = res
                this.categoryData = { ...this.categoryData }
            })


        },
        selectItem (index) {
            this._getSubcategories(index)
        }
    }
}
</script>

<style scoped>
#category {
    height: 100vh;
}

.nav-bar {
    background-color: var(--color-tint);
    font-weight: 700;
    color: #fff;
}

.content {
    position: absolute;
    left: 0;
    right: 0;
    top: 44px;
    bottom: 49px;
    display: flex;
}

#tab-content {
    height: 100%;
    flex: 1;
}
</style>